<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="utf-8" />
		<title>录入角色信息 - 客户关系管理系统</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
		<meta content="" name="author" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />

		<!-- App favicon -->
		<link rel="shortcut icon" href="../../assets/images/logo-1.png">

		<!-- App css -->
		<link href="../../assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<link href="../../assets/css/jquery-ui.min.css" rel="stylesheet">
		<link href="../../assets/css/icons.min.css" rel="stylesheet" type="text/css" />
		<link href="../../assets/css/metisMenu.min.css" rel="stylesheet" type="text/css" />
		<link href="../../assets/css/app.min.css" rel="stylesheet" type="text/css" />

	</head>

	<body class="dark-topbar dark-sidenav">

		<!-- Top Bar Start -->
		<div th:replace="~{common/Top-bar::top-bar}"></div>
		<!-- Top Bar End -->

		<!-- Left Sidenav -->
		<div th:replace="~{common/Left-side-nav::left-side-nav}"></div>
		<!-- end left-sidenav-->

		<div class="page-wrapper">
			<!-- Page Content-->
			<div class="page-content">

				<div class="container-fluid">
					<!-- Page-Title -->
					<div class="row">
						<div class="col-sm-12">
							<div class="page-title-box">
								<h4 class="page-title">角色信息录入</h4>
							</div>
							<!--end page-title-box-->
						</div>
						<!--end col-->
					</div>
					<!-- end page title end breadcrumb -->

					<div class="row">
						<div class="col-lg-12">
							<div class="card">
								<div class="card-body">
									<div class="row">
										<div class="col-lg-12">
											<form th:action="@{/system/role_add}" method="post"
													class="needs-validation" novalidate>
												<div class="form-group row">
													<label for="roleName"
														class="col-sm-2 col-form-label text-right">角色名称</label>
													<div class="col-sm-8">
														<input class="form-control" type="text" value=""
                                                               th:value="${role == null?'':role.roleName}" name="roleName"
															   required maxlength="10"
															id="roleName">
														<div class="invalid-feedback">角色名称不能为空，且不能超过10个字</div>
                                                        <div class="text-danger mb-2"
                                                             th:if="${errors != null and errors.containsKey('roleName')}"
                                                             th:text="${errors.roleName}"></div>
													</div>
												</div>
												<div class="form-group row">
													<label for="remark"
														class="col-sm-2 col-form-label text-right">备注</label>
													<div class="col-sm-8">
														<textarea name="remark" class="form-control" rows="5" id="remark"
                                                                  th:text="${role == null?'':role.remark}"
															maxlength="1000"
														></textarea>
														<div class="invalid-feedback">角色名称不能为空，且不能超过1000个字</div>
                                                        <div class="text-danger mb-2"
                                                             th:if="${errors != null and errors.containsKey('remark')}"
                                                             th:text="${errors.remark}"></div>
													</div>
												</div>
												<div class="row">
													<div class="col-sm-10 ml-auto">
														<button type="submit"
															class="btn btn-gradient-primary">保存</button>
														<button type="reset"
															class="btn btn-gradient-danger">重置</button>
													</div>
												</div>
											</form>
										</div>
									</div>
								</div>
								<!--end card-body-->
							</div>
							<!--end card-->
						</div>
						<!--end col-->
					</div>
					<!--end row-->

				</div><!-- container -->
				<!--end footer-->
			</div>
			<!-- end page content -->
		</div>
		<!-- end page-wrapper -->




		<!-- jQuery  -->
		<script src="../../assets/js/jquery.min.js"></script>
		<script src="../../assets/js/bootstrap.bundle.min.js"></script>
		<script src="../../assets/js/metismenu.min.js"></script>
		<script src="../../assets/js/waves.js"></script>
		<script src="../../assets/js/feather.min.js"></script>
		<script src="../../assets/js/jquery.slimscroll.min.js"></script>
		<script src="../../assets/js/jquery-ui.min.js"></script>

		<!-- App js -->
		<script src="../../assets/js/app.js"></script>
		<script>

			// 对表单添加提交响应事件函数
			// 在提交响应事件处理函数中调用表单对象的验证方法如果验证通过则返回true,允许提交
			// 如果验证失败，则返回false，禁止提交
			$('.needs-validation').submit(function (event) {
				if (this.checkValidity() === false) {
					$(this).addClass('was-validated')
					return false;
				}else {
					return true;
				}
			})







		</script>
	</body>

</html>
